import React, { Component } from 'react';
import {
  Text,
  View,
 StyleSheet,
 FlatList,
 Button
} from 'react-native';
import { StackNavigator} from 'react-navigation';

export default class FetchScreen extends React.Component{
    static navigationOptions={
        title:'Fetch'
    };

    constructor(props){
        super(props);
        this.state={
            data : []
        };
    }

    // getMoviesFromApiAsync(){
    //      fetch('https://facebook.github.io/react-native/movies.json',{
    //         //  method:'post',
    //         //  headers:{
    //         //     'Accept':'application/json',
    //         //     'Content-Type':'application/json',
    //         //  },
    //         //  body:JSON.stringify({
    //         //      firstParam:'valuw1',
    //         //      secondParam:'value2',
    //         //  })

    //         //form格式
    //         method:'post',
    //          headers:{
    //              'Content-Type':'application/x-www-form-urlencoded',
    //          },
    //          body:'key1=value1&key2=value2'
    //      })
    //      .then((response)=>response.json())
    //      .then((responseJson)=>{
    //          alert(JSON.stringify(responseJson));
    //          this.setState({data:responseJson.movies})
    //      })
    //      .catch((error)=>{
    //          console.error(error)
    //      })
    //  }


     getMoviesFromApiAsync(){
         fetch('https://facebook.github.io/react-native/movies.json')
        .then((response)=>response.json())
        .then((responseJson)=>{
            alert(JSON.stringify(responseJson));
            this.setState({data:responseJson.movies})
        })
        .catch((error)=>{
            console.error(error)
        })
    }

    /**
     * 使用ES7标准中的async/await 语法
     */
    // 注意这个方法前面有async关键字
    async getMoviesFromApi(){
        try {
            // 注意这里的await语句，其所在的函数必须有async关键字声明
            let response=await fetch('https://facebook.github.io/react-native/movies.json');
            let responseJson=await response.json();
            return responseJson.movies;
        } catch (error) {
            console.error(error);
        }
    }
 
    /**
     * 使用XMLHttpRequest请求
     */
    getMoviesFromApi1(){
        var request=new XMLHttpRequest();
        request.onreadystatechange=(e)=>{
            if(request.readyState!==4){
                return;
            }

            if(request.status===200){
               console.log('success',request.responseText);      
            }else{
               console.warn('error');
            }
        }

        request.open('GET','https://mywebsite.com/endpoint/');
        request.send();
    }
    


    render(){
        const {navigate}=this.props.navigation;

        return(
            <View style={styles.container}>
                <Button 
                  onPress={()=>this.getMoviesFromApiAsync()}
                  title='网络请求'
                />
               <FlatList
                   data={this.state.data}
                   renderItem={({item})=>
                     <Text style={styles.item}>{item.title}</Text>
                   }
               />
            </View>
        );
    }

    //页面挂载时调用此方法
    componentDidMount() {
        this.getMoviesFromApiAsync();
     }

}


const styles =StyleSheet.create({
    container:{
        flex:1,
        paddingTop:20,
    },
    item:{
        padding:10,
        fontSize:14,
        height:40,
    }
})